Day 3 - cheatSheet 小技巧與本機環境設定 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

Modern Web

前端藝術 - 用P5.js做藝術系列第 3 篇

Day 3 - cheatSheet 小技巧與本機環境設定

13th鐵人賽 p5

Brian 三十不立

團隊Web 實驗室

2021-09-18 12:11:39

1085 瀏覽

分享至

CheatSheet 小技巧

因為大家其實不太會被指令所以在網路上有一個小小的P5 cheatsheet 小教學如果有需要可以隨時回來這邊去看自己有需要的東西

本地安裝

如果您有本地端的設定可以參考因為教學都是用在網路編輯器，但我們其實還是需要在本機端才是最主要的需求

https://p5js.org/get-started/

他會直接提供主要大家可以直接在本機端如何直接設定的做法
建議也可以安裝 VSCODE 跟 liveserve 去把P5.js直接執行出來

也可以直接去下載他的CDN在html裡面放入P5.js

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p5.js example</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="p5.js"></script>
    <!-- <script src="../addons/p5.sound.js"></script> -->
    <script src="sketch.js"></script>
  </head>

  <body>
    <main></main>
  </body>
</html>

sketch.js裡面只要放入 p5 的設定就可以跑執行看看了

function setup() {
  //slow down the frameRate to make it more visible
  createCanvas(1000, 1000);
  background(0, 0, 0);
}

function draw() {
  background(100, 10);
  fill(mouseX, mouseY, frameCount);
  if (mouseIsPressed) {
    fill(0);
    rect(mouseX, mouseY, 100, 100);
  } else {
    ellipse(mouseX, mouseY, 100, 100);
  }
}
// print(pmouseX +